<!DOCTYPE html>
<html lang="zh">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Input</title>
</head>
<body>
   <input id="text" type="text" style="width: 400px;height: 40px;">
</body>
<script>
   let flag = false
   const textEle = document.querySelector("#text");
   const search = (val)=>{
   	console.log('search', val)
   }
   textEle.addEventListener('input', ev=>{
   	if(!flag){
   		search(ev.target.value)
   	}
   })
   
   textEle.addEventListener('compositionstart', (ev)=>{
   	flag = true;
   	// console.log('start:', ev.target.value)
   })
   textEle.addEventListener('compositionend', (ev)=>{
   	flag = false;
   	// console.log('end:', ev.target.value)
               search(ev.target.value)
   })
</script>
</html>
